<template>
  <a-modal
    title="新增附件"
    :width="800"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="附件上传">
              <a-upload-dragger
                name="file"
                :multiple="true"
                action="#"
                :file-list="fileList"
                :custom-request="uploadFile"
                @change="handleChange">
                <p class="ant-upload-drag-icon">
                  <a-icon type="inbox" />
                </p>
                <p class="ant-upload-text">
                  点击或拖拽文件上传
                </p>
              </a-upload-dragger>
            </a-form-item>
            <a-form-item label="附件ID" v-show="false">
              <a-input
                v-decorator="['fileIds']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { saveFile } from '@/api/manage'

// 表单字段
const fields = ['id', 'contactName', 'jobs', 'sex', 'contactWay', 'privateContactWay', 'customerGrade', 'email', 'hobbies', 'note', 'address']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      fileList: []
    }
    return {
      form: this.$form.createForm(this),
      fileList: []
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  methods: {
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
    resetFileList () {
      this.fileList = []
    },
    uploadFile (e) {
      const param = new FormData()
      param.append('file', e.file)
      saveFile(param)
        .then(res => {
          e.onSuccess({ uid: e.file.uid, name: res.data.fileName, status: 'done', url: res.data.fileUrl, fileId: res.data.fileId }, e)
          // 提交时只去状态是done的文件
          if (this.fileList) {
            const fileList = this.fileList.filter((item) => item.status === 'done')
            if (fileList) {
              const fileIds = []
              for (const item of fileList) {
                fileIds.push(item.response.fileId)
              }
              this.form.setFieldsValue({ fileIds: fileIds.join(',') })
            }
          }
        }).catch(() => e.onError({ status: 'error', url: '' }, e)
      )
    }
  }
}
</script>
